<!--
 * @Descripttion: 安装列表
 * @version: 
 * @Author: gonghong
 * @Date: 2023-07-05 09:43:20
-->
<script setup>
import { reactive, ref } from 'vue'
import { onPullDownRefresh, onShow, onLoad } from '@dcloudio/uni-app'
import { geInstallOrderListByOperator } from '@/api/system'
import deviceList from './device-list'
import empty from '@/components/empty/empty'

//分段显示器
const segmentedItem = reactive(['未安装', '已安装'])
const activeColor = ref('#007aff')
const current = ref(0)

//刷新分页页码
const pageNum = ref(1)
const pageSize = ref(20)
const total = ref(0)
const triggered = ref(false)
const _freshing = ref(false)

//工单数据列表
const wordOrderData = reactive([])

onShow(async () => refreshLiData())

/**
 * @function 分段选择器未安装/已安装
 * @param {*} e
 * @return {*}
 */
// const tabsClickItem = (e) => {
//   if (current.value != e.currentIndex) {
//     current.value = e.currentIndex
//     /**
//      * 1。切换-从新请求数据
//      * 2、请求参数pageNum重置为1
//      */
//     pageNum.value = 1
//     refreshLiData()
//   }
// }

const tabsClickItem = (e) => {
  if (current.value != e.currentIndex) {
    try {
      current.value = e.currentIndex
      uni.showLoading({ title: '加载中', mask: true })
      pageNum.value = 1
      refreshLiData()
    } catch (error) {
      uni.hideLoading()
    }
  }
}

// onShow(async () => {
//   refreshLiData()
// })

/**
 * @function 重置刷新列表
 * @return {*}
 */
const refreshLiData = async () => {
  wordOrderData.length = 0
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)

  return data
}

/**
 * @function 根据页码加载安装设备工单列表数据
 * @return {*}
 */
const getList = async () => {
  const result = await geInstallOrderListByOperator({
    pageNum: pageNum.value,

    pageSize: pageSize.value,
    condition: {
      installationStatus: current.value
    }
  })
  const resultData = result.data?.records || []

  
  total.value = result.data.total
  return resultData
}


/**
 * @function 下拉刷新
 * @return {*}
 */


 const onRefresh = () => {
  triggered.value = true
}
const onPulling = async () => {
  if (_freshing.value) return
  _freshing.value = true

  try {
    const result = await getList()
    triggered.value = false
    _freshing.value = false
    if (result) {
      wordOrderData.length = 0
      wordOrderData.push(...result)
    }
  } catch (error) {
    triggered.value = false
    _freshing.value = false
  }
}
const onRestore = () => {
  triggered.value = 'restore'
}

// onPullDownRefresh(async () => {
//   pageNum.value = pageNum.value + 1
//   //1、从新调用接口获取数据.
//   //2、停止下拉刷新.
//   uni.showLoading({ title: '加载中', mask: true })
//   const data = await getList()
//   uni.hideLoading()
//   wordOrderData.push(...data)
//   uni.stopPullDownRefresh()
// })

/**
 * @function 上拉加载
 * @return {*}
 */
 const loadMoreData = async () => {
  if (wordOrderData.length >= total.value) {
    return
  }
  pageNum.value = pageNum.value + 1
  uni.showLoading({ title: '加载中', mask: true })
  const data = await getList()
  uni.hideLoading()
  wordOrderData.push(...data)
}
</script>

<template>
  <view class="container">
    <uni-segmented-control
      :current="current"
      :values="segmentedItem"
      styleType="text"
      :activeColor="activeColor"
      @clickItem="tabsClickItem"
    />
    <scroll-view
      v-if="wordOrderData && wordOrderData.length !== 0"
      style="height: calc(100vh - 36px)"
      :scroll-y="true"
      :lower-threshold="50"
      @scrolltolower="loadMoreData"
      :refresher-enabled="true"
      :refresher-threshold="50"
      :refresher-triggered="triggered"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
    >
      <view class="content">
        <list v-if="wordOrderData && wordOrderData.length">
          <deviceList v-for="item in wordOrderData" :key="item.id" :item="item" />
        </list>
        <!-- <empty v-else context="暂无安装信息" /> -->
      </view>
    </scroll-view>
  <empty v-else context="暂无安装信息" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
  overflow-y: auto;
}
</style>
